const path = require('path')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

const WebpackBar = require('webpackbar')

const isPro = process.env.NODE_ENV === 'production'

const loaderOptions = {
  fileLoader: {
    loader: 'file-loader',
    options: {
      //配置公共资源路径
      publicPath: '/assets/font',
      //配置输出路径
      outputPath: 'assets/font',
      name: '[name].[contenthash:8].[ext]'
    }
  },
  urlLoader: {
    loader: 'url-loader',
    options: {
      /** 20k Base64 */
      limit: 20 * 1024,
      //配置公共资源路径
      publicPath: '/assets/img',
      //配置输出路径
      outputPath: 'assets/img',
      name: '[name].[contenthash:8].[ext]'
    }
  },
  cssModulesLoader: {
    loader: 'css-loader',
    options: {
      url: true,
      sourceMap: false,
      esModule: true,
      importLoaders: 1,
      modules: {
        mode: 'local',
        localIdentName: '[local]--[contenthash:base64:8]'
      }
    }
  },
  cssLoader: { loader: 'css-loader' },
  postcssLoader: {
    loader: 'postcss-loader',
    options: {
      postcssOptions: {
        plugins: [
          /** autoprefixer css3 将未来的 CSS 特性带到今天！ 帮你将最新的 CSS 语法转换成大多数浏览器都能理解的语法，并根据你的目标浏览器或运行时环境来确定你需要的 polyfills，此功能基于 cssdb 实现 */
          'postcss-preset-env',
          /** @import ''; */
          'postcss-import',
          /** sass 语法 */
          'precss',
          /** css flex 解析，简写和全写 */
          'postcss-flexbugs-fixes'
        ]
      }
    }
  },
  styleLoader: 'style-loader',
  lessLoader: {
    loader: 'less-loader',
    options: {
      lessOptions: {
        javascriptEnabled: true,
        modifyVars: {}
      }
    }
  }
}

module.exports = {
  mode: 'development',
  target: 'electron-renderer',
  entry: {
    index: ['core-js', 'regenerator-runtime/runtime', path.join(__dirname, 'src/index.tsx')]
  },
  devtool: isPro ? false : 'cheap-module-source-map',
  cache: { type: 'filesystem' },
  output: {
    path: path.join(__dirname, 'dist'),
    publicPath: isPro ? './' : '/',
    filename: 'assets/js/[name].[contenthash:8].js'
  },
  resolve: {
    extensions: ['.tsx', '.ts', '.js', '.json'],
    alias: {
      src: path.join(__dirname, 'src'),
      '@/*': path.join(__dirname, 'src'),
      '~/*': path.join(__dirname)
    },
    fallback: {
      module: false,
      dgram: false,
      dns: false,
      fs: false,
      http2: false,
      net: false,
      tls: false,
      child_process: false
    }
  },
  module: {
    rules: [
      {
        oneOf: [
          {
            test: /\.(js|mjs|jsx|ts|tsx)$/,
            exclude: [/node_modules/],
            use: [
              {
                loader: 'babel-loader',
                options: {
                  cacheDirectory: true,
                  compact: false,
                  presets: ['@babel/preset-typescript', '@babel/preset-react'],
                  plugins: [].concat(isPro ? [] : ['react-refresh/babel'])
                }
              }
            ]
          },
          {
            test: /\.(node)$/,
            use: [
              {
                loader: 'native-ext-loader',
                options: {
                  emit: false,
                  basePath: [path.join(process.cwd(), '/public/library')],
                  crewritePath: process.platform === 'win32' ? './resources' : '../Resources'
                }
              }
            ]
          },
          {
            test: /\.(woff|woff2|eot|ttf)$/,
            exclude: [/node_modules/],
            use: [loaderOptions.fileLoader]
          },
          {
            test: /\.jpe?g|png|gif|svg|ico$/,
            exclude: [/node_modules/],
            use: [loaderOptions.urlLoader]
          },
          {
            test: /\.(less)$/,
            use: [loaderOptions.styleLoader, loaderOptions.cssLoader, loaderOptions.lessLoader],
            exclude: [/\.(module\.less)$/]
          },
          {
            test: /\.(module\.less)$/,
            exclude: [/node_modules/],
            use: [loaderOptions.styleLoader, loaderOptions.cssModulesLoader, loaderOptions.lessLoader]
          },
          {
            test: /\.(module\.css)$/,
            exclude: [/node_modules/],
            use: [loaderOptions.styleLoader, loaderOptions.cssModulesLoader, loaderOptions.postcssLoader]
          },
          {
            test: /\.(css)$/,
            use: [loaderOptions.styleLoader, loaderOptions.cssLoader, loaderOptions.postcssLoader],
            exclude: [/\.(module\.css)$/]
          }
        ]
      }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: path.join(__dirname, 'public/index.html'),
      filename: 'index.html',
      title: 'React Servive',
      chunksSortMode: 'auto'
    }),
    new CleanWebpackPlugin(),
    new WebpackBar({ name: 'Electron Cli Services' })
  ].concat(isPro ? [] : [new ReactRefreshWebpackPlugin({ forceEnable: true }), new webpack.HotModuleReplacementPlugin()])
}

// config.plugin('antdDayjs').use(require.resolve('antd-dayjs-webpack-plugin'))
